<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>gulimall注册页面</title>
    <script src="/static/reg/libs/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/reg/js/jQuery/jquery-3.1.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/reg/bootStrap/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/static/reg/sass/index.css"/>
    <link rel="stylesheet" type="text/css" href="/static/reg/css/index.css">


</head>

<body>
<header>
    <a href="/static/reg/https://www.jd.com/?cu=true&utm_source=haosou-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_haosoupinzhuan&utm_term=0a875d61c5fe47d8bc48679132932d23_0_2702c6f4ae1c4cd191c1ee4398e2e21b"
       class="logo"><img src="/static/reg/img/logo1.jpg" alt=""></a>
    <div class="desc">欢迎注册</div>
    <div class="dfg">
        <span>已有账号？</span>
        <a href="/static/reg/">请登录</a>
    </div>
</header>
<section>
    <form id="form" action="#" class="one">
        <div class="register-box">
            <label for="username" class="username_label">用 户 名
                <input id="userName" name="userName" maxlength="20" type="text" placeholder="您的用户名和登录名">
            </label>
            <div class="tips">

            </div>
        </div>
        <div class="register-box">
            <label for="password" class="other_label">设 置 密 码
                <input id="password" name="password" maxlength="20" type="password" placeholder="建议至少使用两种字符组合">
            </label>
            <div class="tips">

            </div>
        </div>
        <div class="register-box">
            <label for="username" class="other_label">确 认 密 码
                <input maxlength="20" type="password" placeholder="请再次输入密码">
            </label>
            <div class="tips">

            </div>
        </div>
        <div class="register-box">
            <label for="phone" class="other_label">
                <span>中国 0086∨</span>
                <input id="phone" name="phone"  class="phone" maxlength="20" type="text" placeholder="建议使用常用手机">
            </label>
            <div class="tips">

            </div>
        </div>
		<div class="register-box">
			<label for="email" class="username_label">邮 箱 号
				<input id="email" name="email"  maxlength="100" type="text" placeholder="您的邮箱号">
			</label>
			<div class="tips">

			</div>
		</div>
        <div class="register-box">
            <label for="code" class="other_label">验 证 码
                <input id="code" name="code" maxlength="20" type="text" placeholder="请输入验证码" class="caa">
            </label>
            <!--						<img class="verifyCode"  onclick="changeCode()" src="/auth/getVerifyCode">-->
            <span id="sendCode">发送验证码</span>
            <div class="tips">

            </div>
        </div>
        <div class="arguement">
            <input type="checkbox" id="xieyi"> 阅读并同意
            <a href="/static/reg/#">《谷粒商城用户注册协议》</a>
            <a href="/static/reg/#">《隐私政策》</a>
            <div class="tips">

            </div>
            <br/>
            <div class="submit_btn">
                <button type="button" id="submit_btn">立 即 注 册</button>
            </div>
        </div>

    </form>
</section>
<br/><br/>
<hr>
<p class="bq">Copyright©2021-2022 商城mall.com 版权所有</p>
<br/><br/>
<script type="text/javascript" charset="utf-8">
    /*点击刷新验证码*/

    // function changeCode(){
    //
    // 	var src = "/auth/getVerifyCode?"+new Date().getTime(); //加时间戳，防止浏览器利用缓存
    //
    // 	$('.verifyCode').attr("src",src);                  //jQuery写法
    //
    // }
    var num = 60;

    function timeoutChangeStyle() {
        //开启倒计时后设置标志属性disable，使得该按钮不能再次被点击
        $('#sendCode').attr("class", "disabled");
        //当时间为0时，说明倒计时完成，则重置
        if (num == 0) {
            $('#sendCode').text("发送验证码");
            num = 60;
            $('#sendCode').attr("class", "");
        } else {
            //每秒调用一次当前函数，使得num--
            var str = num + "s 后再次发送";
            $('#sendCode').text(str);
            setTimeout("timeoutChangeStyle()", 1000);
        }
        num--;
    }

    $(function () {

        //点击发送验证码按钮触发下面函数
        $('#sendCode').click(function () {
            //1、倒计时 如果有disabled，说明最近已经点过，则什么都不做
            if ($(this).hasClass("disabled")) {
                //正在倒计时中
            } else {
                //2、给指定邮箱发送验证码
                $.get("/auth/email/sendCode?email=" + $("#email").val(), function (data) {
                    if (data.code != 0) {
                        alert(data.msg);
                    }
                });
                setTimeout("timeoutChangeStyle()", 1000);
            }
        });


        //聚焦失焦input
        $('input').eq(0).focus(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("支持中文，字母，数字，'-'，'_'的多种组合");
            }
        })
        $('input').eq(1).focus(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("建议使用字母、数字和符号两种以上的组合，6-20个字符");
            }
        })
        $('input').eq(2).focus(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("请再次输入密码");
            }
        })
        $('input').eq(3).focus(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("验证完后，你可以使用该手机登陆和找回密码");
            }
        })
		$('input').eq(4).focus(function () {
			if ($(this).val().length == 0) {
				$(this).parent().next("div").text("请输入邮箱号");
			}
		})
        // $('input').eq(4).focus(function () {
        //     if ($(this).val().length == 0) {
        //         $(this).parent().next().next("div").text("看不清？点击图片更换验证码");
        //     }
        // })
        //input各种判断
        //用户名：
        $('input').eq(0).blur(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("");
                $(this).parent().next("div").css("color", '#ccc');
            } else if ($(this).val().length > 0 && $(this).val().length < 4) {
                $(this).parent().next("div").text("长度只能在4-20个字符之间");
                $(this).parent().next("div").css("color", 'red');
            } else if ($(this).val().length >= 4 && !isNaN($(this).val())) {
                $(this).parent().next("div").text("用户名不能为纯数字");
                $(this).parent().next("div").css("color", 'red');
            } else {
                $(this).parent().next("div").text("");
            }
        })
        //密码
        $('input').eq(1).blur(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("");
                $(this).parent().next("div").css("color", '#ccc');
            } else if ($(this).val().length > 0 && $(this).val().length < 6) {
                $(this).parent().next("div").text("长度只能在6-20个字符之间");
                $(this).parent().next("div").css("color", 'red');
            } else {
                $(this).parent().next("div").text("");
            }
        })
        //	确认密码
        $('input').eq(2).blur(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("");
                $(this).parent().next("div").css("color", '#ccc');
            } else if ($(this).val() != $('input').eq(1).val()) {
                $(this).parent().next("div").text("两次密码不匹配");
                $(this).parent().next("div").css("color", 'red');
            } else {
                $(this).parent().next("div").text("");
            }
        })
        //	手机号
        $('input').eq(3).blur(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("");
                $(this).parent().next("div").css("color", '#ccc');
            } else if ($(this).val().substr(0, 3) != 138 && $(this).val().substr(0, 3) != 189 && $(this).val().substr(0, 3) != 139 && $(this).val().substr(0, 3) != 158 && $(this).val().substr(0, 3) != 188 && $(this).val().substr(0, 3) != 157 || $(this).val().length != 11) {
                $(this).parent().next("div").text("手机号格式不正确");
                $(this).parent().next("div").css("color", 'red');
            } else {
                $(this).parent().next("div").text("");
            }
        })
        //	提交按钮
        $("#submit_btn").click(function (e) {
            for (var j = 0; j < 5; j++) {
                if ($('input').eq(j).val().length == 0) {
                    $('input').eq(j).focus();
                    if (j == 4) {
                        $('input').eq(j).parent().next().next("div").text("此处不能为空");
                        $('input').eq(j).parent().next().next("div").css("color", 'red');
                        e.preventDefault();
                        return;
                    }
                    $('input').eq(j).parent().next(".tips").text("此处不能为空");
                    $('input').eq(j).parent().next(".tips").css("color", 'red');
                    e.preventDefault();
                    return;
                }
            }
            //协议
            if (!$("#xieyi")[0].checked) {
                $("#xieyi").next().next().next(".tips").text("请勾选协议");
                $("#xieyi").next().next().next(".tips").css("color", 'red');
                e.preventDefault();
                return;
            }
            register();
        })

        function register(){
            $.post("/auth/register",$('#form').serialize(),function(result){
                if (!result.success){
                    alert(result.msg);
                }else{
                    window.location.href="http://auth.mall.com/login.html";
                }
            })
        }
    })
    $(".ty").click(function () {
        $(".zong").hide();
        $(".laoda").hide();
    });
    $(".cuo").click(function () {
        $(".zong").hide();
    });
</script>
</body>

</html>
